<!--
 * @Description:
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 02/08/24 4:51 PM
 -->
<!--default-->
<script>
export default { name: 'Demo' }
</script>
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref } from 'vue'
// import Select from '@shared/base/base-form/src/Select.vue'

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])

/* 状态 */
const selectRef = ref()

/* 方法 */

// 初始化
const init = async () => {}

const onSet = () => {
  buttonRef.value.disabled = true
  console.log(buttonRef.value)
}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  init()

  console.log('selectRef', selectRef.value, elCascaderRef.value)
})

const options = ref([
  { key: '1', label: '章三' },
  { key: '2', label: '历史 ' },
  { key: '3', label: '王武' }
])

const noMatchOptions = ref([
  { key: '1', label: '章三' },
  { key: '2', label: '历史 ' },
  { key: '4', label: '王武(错误)' },
  { key: '5', label: '王武(错误)2' },
  { key: '3', label: '王武(错误)1' }
])

const selectValue = ref(['1'])

const buttonRef = ref()

const props1 = {
  checkStrictly: true
}

const props2 = {
  multiple: true,
  checkStrictly: true
}

const options2 = [
  {
    label:
      '说的那件事能否健康的十年房价可能是看能否开森女风宽松内裤伏牛山可能分开苏丹诺夫面试，等你说的那份少女风， 但是，买奶粉吗，说你，买奶粉的，美少女，吗',
    value: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency'
          },
          {
            value: 'feedback',
            label: 'Feedback'
          },
          {
            value: 'efficiency',
            label: 'Efficiency'
          },
          {
            value: 'controllability',
            label: 'Controllability'
          }
        ]
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation'
          },
          {
            value: 'top nav',
            label: 'Top Navigation'
          }
        ]
      }
    ]
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout'
          },
          {
            value: 'color',
            label: 'Color'
          },
          {
            value: 'typography',
            label: 'Typography'
          },
          {
            value: 'icon',
            label: 'Icon'
          },
          {
            value: 'button',
            label: 'Button'
          }
        ]
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio'
          },
          {
            value: 'checkbox',
            label: 'Checkbox'
          },
          {
            value: 'input',
            label: 'Input'
          },
          {
            value: 'input-number',
            label: 'InputNumber'
          },
          {
            value: 'select',
            label: 'Select'
          },
          {
            value: 'cascader',
            label: 'Cascader'
          },
          {
            value: 'switch',
            label: 'Switch'
          },
          {
            value: 'slider',
            label: 'Slider'
          },
          {
            value: 'time-picker',
            label: 'TimePicker'
          },
          {
            value: 'date-picker',
            label: 'DatePicker'
          },
          {
            value: 'datetime-picker',
            label: 'DateTimePicker'
          },
          {
            value: 'upload',
            label: 'Upload'
          },
          {
            value: 'rate',
            label: 'Rate'
          },
          {
            value: 'form',
            label: 'Form'
          }
        ]
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table'
          },
          {
            value: 'tag',
            label: 'Tag'
          },
          {
            value: 'progress',
            label: 'Progress'
          },
          {
            value: 'tree',
            label: 'Tree'
          },
          {
            value: 'pagination',
            label: 'Pagination'
          },
          {
            value: 'badge',
            label: 'Badge'
          }
        ]
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert'
          },
          {
            value: 'loading',
            label: 'Loading'
          },
          {
            value: 'message',
            label: 'Message'
          },
          {
            value: 'message-box',
            label: 'MessageBox'
          },
          {
            value: 'notification',
            label: 'Notification'
          }
        ]
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu'
          },
          {
            value: 'tabs',
            label: 'Tabs'
          },
          {
            value: 'breadcrumb',
            label: 'Breadcrumb'
          },
          {
            value: 'dropdown',
            label: 'Dropdown'
          },
          {
            value: 'steps',
            label: 'Steps'
          }
        ]
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog'
          },
          {
            value: 'tooltip',
            label: 'Tooltip'
          },
          {
            value: 'popover',
            label: 'Popover'
          },
          {
            value: 'card',
            label: 'Card'
          },
          {
            value: 'carousel',
            label: 'Carousel'
          },
          {
            value: 'collapse',
            label: 'Collapse'
          }
        ]
      }
    ]
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      // {
      //   value: 'axure',
      //   label: 'Axure Components',
      // },
      {
        value: 'sketch',
        label: 'Sketch Templates'
      },
      {
        value: 'docs',
        label: 'Design Documentation'
      }
    ]
  }
]

const noMatchOptions2 = [{ value: 'axure', label: '张三' }] // { value: 'axure', label: '张三' }

const value3 = ref([['axure'], ['resource', 'docs']])

const elCascaderRef = ref()

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page">
    <el-button
      ref="buttonRef"
      @click="onSet"
    >
      设置
    </el-button>
    {{ selectValue }}
    <el-select
      ref="selectRef"
      v-model="selectValue"
      :options="options"
      :props="{ value: 'key' }"
      :multiple="true"
      :clearable="false"
      filterable
      :teleported="true"
      :no-match-options="noMatchOptions"
    >
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.key"
      />
    </el-select>

    <div class="m-4">
      <p>Select any level of options (Single selection)</p>
      <!--      <el-cascader :options="options2" :props="props1" clearable />-->
    </div>
    <div class="m-4">
      <p>Select any level of options (Multiple selection)</p>

      {{ value3 }} {{ elCascaderRef?.contentRef }}
      <el-cascader
        ref="elCascaderRef"
        v-model="value3"
        factory-name="ElCascaderMatch"
        :options="options2"
        :props="props2"
        clearable
        :no-match-options="noMatchOptions2"
      />
    </div>

    <!-- 内容区 -->
    <!--    <Select-->
    <!--      v-model="selectValue"-->
    <!--      :options="options"-->
    <!--      multiple-->
    <!--      clearable-->
    <!--      :no-match-options="noMatchOptions"-->
    <!--    />-->
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
}
</style>
